import React, { useState } from 'react';

import { Layout, Button } from 'antd';
import ControlPanel from './ControlPanel';
import Design from './Design';

import controls from '../data/controls';
import uiSchema from '../data/schema';


//import uiSchema from '../data/schema';
import {enterSchema} from '../data/enterSchema';

//import Interval from 'math-interval-js';


const { Header, Footer, Sider, Content } = Layout;

const MainPanel = (props) => {
   
    const [schema, setSchema] = useState(uiSchema);

    //alert(new Interval().test(10, "[1,2]"));
    //console.log(schema,'schema');

    return <Layout
        style={{ height: '100%' }}>
        <Header
            style={{ backgroundColor: 'transparent' }}
            onClick={(e) => {
                alert('Header');
                e.stopPropagation();
            }}>
            <Button onClick={(e) => {
                setSchema(enterSchema);
                e.stopPropagation();
            }}>设置结构</Button>
        </Header>
        <Layout>
            <Sider style={{ backgroundColor: 'transparent' }} >
                <ControlPanel controls={controls} />
            </Sider>
            <Content onDoubleClick={() => {
                alert('test');
            }}>
                <Design
                    schema={schema}
                    onSchemaChange={(source, newSchema) => {
                        console.log(JSON.stringify(newSchema), '新的结构');
                        setSchema(newSchema);
                    }} />
            </Content>
        </Layout>
        <Footer>Footer</Footer>
    </Layout>
}

export default MainPanel;
